html.dark {
  // 变量(自定义时，只需修改这里的值)
  --p-bg-main: #1f1f1f;
  --p-color-white: #ffffff;
  --p-color-disabled: #191919;
  --p-color-bar: #dadada;
  --p-color-primary: #303030;
  --p-border-color: #424242;
  --p-border-black: #333333;
  --p-border-columns: #2a2a2a;
  --p-color-seting: #505050;
  --p-text-color-regular: #9b9da1;
  --p-text-color-placeholder: #7a7a7a;
  --p-color-hover: #3c3c3c;
  --p-color-hover-rgba: rgba(0, 0, 0, 0.3);
  --p-bg-color: #7a7a7a;
  --p-bg-aside: #232324;
  --p-bg-aside-2: #303030;

  // element plus
  --el-color-white: var(--p-color-disabled) !important;
  --el-text-color-primary: var(--p-color-bar) !important;
  --el-border-color: var(--p-border-black) !important;
  --el-border-color-light: var(--p-border-black) !important;
  --el-border-color-lighter: var(--p-border-black) !important;
  --el-border-color-extra-light: var(--el-color-primary-light-8) !important;
  --el-text-color-regular: var(--p-text-color-regular) !important;
  --el-bg-color: var(--p-color-disabled) !important;
  --el-color-primary-light-9: var(--p-color-hover) !important;
  --el-text-color-disabled: var(--p-text-color-placeholder) !important;
  --el-text-color-disabled-base: var(--el-color-primary) !important;
  --el-text-color-placeholder: var(--p-text-color-placeholder) !important;
  --el-disabled-bg-color: var(--p-color-disabled) !important;
  --el-fill-base: var(--p-color-white) !important;
  --el-fill-colo: var(--p-color-hover-rgba) !important;
  --el-fill-color: var(--p-color-hover-rgba) !important;
  --el-fill-color-blank: var(--p-color-disabled) !important;
  --el-fill-color-light: var(--p-color-hover-rgba) !important;
  --el-bg-color-overlay: var(--el-color-primary-light-9) !important;
  --el-mask-color: rgb(42 42 42 / 80%);
  --el-fill-color-lighter: var(--p-color-hover-rgba) !important;

  // button
  .el-button {
    &:hover {
      border-color: var(--p-border-color) !important;
    }
  }
  .el-button--primary,
  .el-button--info,
  .el-button--danger,
  .el-button--success,
  .el-button--warning {
    --el-button-text-color: var(--p-color-white) !important;
    --el-button-hover-text-color: var(--p-color-white) !important;
    --el-button-disabled-text-color: var(--p-color-white) !important;
    &:hover {
      border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
    }
  }

  // drawer
  .el-divider__text {
    background-color: var(--el-color-white) !important;
  }
  .el-drawer {
    border-left: 1px solid var(--p-border-color-light) !important;
  }

  // tabs
  .el-tabs--border-card {
    background-color: var(--el-color-white) !important;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background: var(--p-color-primary-lighter);
  }

  // alert / notice-bar
  .home-card-item {
    border: 1px solid var(--p-border-color-light) !important;
  }
  .el-alert,
  .notice-bar {
    border: 1px solid var(--p-border-color) !important;
    background-color: var(--p-color-disabled) !important;
  }
  // colorPicker
  .el-color-picker__mask {
    background: unset !important;
  }

  .el-color-picker__trigger {
    border: 1px solid var(--p-border-color-light) !important;
  }

  .el-switch{
    --el-switch-off-color: var(--p-bg-color) !important;
  }

  // popper / dropdown
  .el-popper {
    border: 1px solid var(--p-border-color) !important;
    color: var(--el-text-color-primary) !important;
    .el-popper__arrow:before {
      background: var(--el-color-white) !important;
      border: 1px solid var(--p-border-color);
    }
    a {
      color: var(--el-text-color-primary) !important;
    }
  }
  .el-popper,
  .el-dropdown-menu {
    background: var(--el-color-white) !important;
  }
  .el-dropdown-menu__item:hover:not(.is-disabled) {
    background: var(--el-bg-color) !important;
  }
  .el-dropdown-menu__item.is-disabled {
    font-weight: 700 !important;
  }

  // input
  .el-input-group__append,
  .el-input-group__prepend {
    border: var(--el-input-border) !important;
    border-right: none !important;
    background: var(--p-color-disabled) !important;
    border-left: 0 !important;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    background: var(--p-color-disabled) !important;
  }

  // tag
  .el-select .el-select__tags .el-tag {
    background-color: var(--p-bg-color) !important;
  }



  // pagination
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: var(--p-color-white) !important;
  }
  .el-pagination.is-background .btn-p,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: var(--p-bg-color);
  }
  /*深色模式时分页高亮问题*/
  .el-pagination.is-background .btn-p.is-active,
  .el-pagination.is-background .btn-prev.is-active,
  .el-pagination.is-background .el-pager li.is-active {
    color: var(--p-color-white) !important;
  }

  // radio
  .el-radio-button:not(.is-active) .el-radio-button__inner {
    border: 1px solid var(--p-border-color-light) !important;
    border-left: 0 !important;
  }
  .el-radio-button.is-active .el-radio-button__inner {
    color: var(--p-color-white) !important;
  }

  // date-picker
  .el-picker-panel {
    background: var(--el-color-white) !important;
  }

  // dialog
  .el-dialog {
    border: 1px solid var(--el-border-color-lighter);
    .el-dialog__header {
      color: var(--el-text-color-primary) !important;
    }
  }

  // columns
  .layout-columns-aside ul .layout-columns-active {
    color: var(--p-color-white) !important;
  }
  .layout-columns-aside {
    border-right: 1px solid var(--p-border-columns);
  }

  // loading
  .el-loading-mask {
    background-color: var(--p-bg-main) !important;
  }

  .main-header,.side-panel,.center-layout-container,.form-widget-main,{
    background-color: var(--el-fill-color-blank) !important;
  }
  .widget-aside,.el-aside.setting-panel{
    background-color: var(--p-bg-aside) !important;
  }
  .widget-container{
    background-color: var(--el-fill-color-blank) !important;
  }
  .design-bold{
    color: var(--p-color-white)
  }
  .code-editor-wrap{
    background-color: var(--el-fill-color-blank) !important;
  }
}